Currently, the Inspector offers three different kinds of DOM mutation breakpoints, subtree modification, attribute modification and node removal.

If multiple changes happen, the script execution is halted at each one. This may be sufficient for many cases, though sometimes you want to have more fine-grained control over when the execution stops.

Use cases:

• You want to break when a specific node is added to an element's sub-tree.
• You want to break when a specific attribute is added to an element.
• You want to break when a specific class is added to or removed from the class attribute.

For those cases, there should be a way to add conditions to the DOM mutation breakpoints similar to how they work for normal breakpoints.

I can see two approaches to this:

1. Match a string against the whole change. So, for a sub-tree modification breakpoint, match a given string against the whole sub-tree textually, or for an attribute modification breakpoint, match a given string against the attribute plus its value including the equal sign and quotes.
2. Match a string against different properties of the change. That means allow to select whether an attribute or its value was added or removed or its value got modified in a specific way, or for sub-tree modifications whether a specific node got added or removed.

Those two are non-exclusive, so for the simple cases you may offer a full-text search and for more advanced cases allow more precise conditions to match against.

UI suggestion: Conditions should be modifyable within the Inspector (similar to how you can modify normal breakpoints within the Debugger) and the Debugger should reflect the chosen conditions in its DOM Mutation Breakpoints pane.

Sebastian